<template>
  <div class="main01">
    <basic-layout title="体检机构详情" backBtnType="arrow" :showAddBtn="false" class="wrapBox">

      <div class="body_box">
        <div class="main">
          <div style="margin: 10px">
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" v-if="images.length != 0">
              <van-swipe-item v-for="(image,index) in images" :key="index">
                <img class="swiper-img" :src="image.url" alt="">
              </van-swipe-item>
            </van-swipe>
          </div>

          <div style=" font-weight: bold;margin: 5px 10px;">体检机构</div>
          <div>
            <div class="fContentMain firstClass">
              <div class="contentC">
<!--                <div class="box-title">体检机构</div>-->
                <div>
                  <div class="title">
                    <div>体检机构类型</div>
                    <div>{{detailDate.type}}</div>
                  </div>
                  <div class="title">
                    <div>体检机构名称</div>
                    <div>{{detailDate.name}}</div>
                  </div>
                  <div class="title">
                    <div>体检机构地址</div>
                    <div>{{detailDate.address}}</div>
                  </div>
                  <div class="title">
                    <div>联系人</div>
                    <div>{{detailDate.contactName}}</div>
                  </div>
                  <div class="title">
                    <div>联系方式</div>
                    <div>{{detailDate.contactPhone}}</div>
                  </div>
                  <div class="title">
                    <div>营业时间</div>
                    <div>{{detailDate.business}}</div>
                  </div>
                  <div class="title">
                    <div>备注</div>
                    <div>{{detailDate.remark}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style=" font-weight: bold;margin: 5px 10px;">体检机构简介</div>
          <div class="fContentMain firstClass" style="white-space: pre-wrap;">
            {{detailDate.introduction}}
          </div>

        </div>

      </div>
    </basic-layout>

    <full-loading v-if="loading"></full-loading>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import { queryFileList } from "@api/common";
import { getById } from "@/api/realAssets/rvhealth/organizations";

export default {
  name: 'applyOrganizationsDetails',
  props: {},
  components: {},
  data() {
    return {
      loading: false,

      //体检机构照片
      images: [],
      //体检机构信息
      detailDate: {},

    }
  },

  created() {
    //根据id获得体检机构信息
    this.getByOrganizationsId();
  },
  computed: {},

  methods: {
    // 根据id获得体检机构信息
    getByOrganizationsId() {
      this.loading = true;
      //根据id获得体检机构信息
      getById({id: this.$route.query.id}).then(response => {
        //体检机构信息
        this.detailDate = response.data.data;

        //走马灯的轮播图
        this.images = [];
        //获得照片数据
        if (this.detailDate.fileArr.length != 0) {
          //根据fileCodeArr获得url
          queryFileList(this.detailDate.fileArr).then((res) => {
            if (res.code === 1000 && res.data) {
              //走马灯的轮播图
              this.images = res.data;
            }
          });
        }

        this.loading = false;

      });
    },

    calcMargin(index) {
      if (index == 0) {
        return '10px 0px';
      } else {
        return '0px 0px 10px 0px';
      }
    },

  },
}
</script>
<style lang="less" scoped>
.my-swipe {
  height: 160px;

  .van-swipe-item {
    background-color: #b8bab4;
    text-align: center;

    .swiper-img {
      width: 100%;
      height: 160px;
    }
  }
}

.apply-des {
  width: 300px;
  padding: 5px;

  .title {
    text-align: center;
    font-size: 16px;
    line-height: 40px;
  }

  .des {
    border: 1px solid #f2f2f2;
  }
}

.body_box {
  background-color: #f9f9f9;
  padding: 10px 0;


  .fContentMain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(254, 255, 255);
    color: rgb(51, 51, 51);
    border: 0.1px solid rgb(220, 223, 230);
    border-radius: 6px;
    margin: 10px;
    padding: 10px;

    .contentC {
      display: flex;
      align-items: flex-start;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      height: 100%;
      flex-direction: column;
      justify-content: space-between;

      .box-title {
        font-weight: bold;
        margin: 5px 10px;
      }


      .title {
        display: flex;
        width: 100%;
        margin: 5px 10px;


        div:first-child {
          width: 100px;
          color: #878888;
        }

        div:last-child {
          width: calc(100% - 100px);
          //font-weight: 500;
        }

      }
    }
  }

  .firstClass {
    min-height: 120px !important;
  }

  .firstClass_02 {
    min-height: 60px !important;
  }

  .secondClass {
    min-height: 60px !important;
  }


  .head {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 10px 0px;
    background-color: rgb(254, 255, 255);
    flex-direction: column;

    .picStyle {
      background-image: url('../../../../assets/images/shz.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStyleNoPass {
      background-image: url('../../../../assets/images/prohibit.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStyleWait {
      background-image: url('../../../../assets/images/allocate.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStylePass {
      background-image: url('../../../../assets/images/complete.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .f {
      font-size: 20px;
      font-weight: 600;
    }

    .ff {
      font-size: 10px;
      font-weight: 600;
    }
  }
}</style>
